<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <style>
      .row {
        display: flex;
      }

      .block {
        flex-shrink: 0;
        width: 14px;
        height: 14px;
        outline: 1px solid #cccccc;
      }

      .black {
        background-color: black;
      }

      .mark {
        position: relative;
      }

      .mark::before {
        content: " ";
        position: absolute;
        left: 30%;
        right: 30%;
        top: 10%;
        bottom: 50%;
        border-radius: 50%;
        background-color: red;
      }

      .mark-1 { transform: rotate(90deg); }
      .mark-2 { transform: rotate(180deg); }
      .mark-3 { transform: rotate(270deg); }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      function sleep(ms) {
        return new Promise(res => setTimeout(() => res(), ms))
      }

      const DIRECTIONS = [[0, -1], [1, 0], [0, 1], [-1, 0]]

      const WIDTH = 101
      const HEIGHT = 101

      const mapE = document.getElementById('map')
      for (let i = 0; i < HEIGHT; i++) {
        const rowE = document.createElement('div')
        rowE.className = 'row'
        for (let j = 0; j < WIDTH; j++) {
          const blockE = document.createElement('div')
          blockE.className = 'block'
          rowE.appendChild(blockE)
        }
        mapE.appendChild(rowE)
      }

      function isBlack(x, y) {
        return mapE.children[x].children[y].classList.contains('black')
      }

      function toggleBlack(x, y) {
        mapE.children[x].children[y].classList.toggle('black')
      }

      function mark(x, y, direction) {
        mapE.children[x].children[y].classList.add('mark', 'mark-' + direction)
      }

      function unmark(x, y) {
        mapE.children[x].children[y].classList.remove('mark', 'mark-0', 'mark-1', 'mark-2', 'mark-3')
      }

      let currentX = 50
      let currentY = 50
      let currentDirection = 0
      mark(currentX, currentY, currentDirection)

      {
        (async () => {
          while (currentX >= 0 && currentX < WIDTH && currentY >= 0 && currentY < HEIGHT) {
            currentDirection = (currentDirection + (isBlack(currentX, currentY) ? 3 : 1)) % 4
            toggleBlack(currentX, currentY)
            unmark(currentX, currentY)
            currentX += DIRECTIONS[currentDirection][0]
            currentY += DIRECTIONS[currentDirection][1]
            mark(currentX, currentY, currentDirection)
            await sleep(1)
          }
        })()
      }
    </script>
  </body>
</html>
